<template>
  <div style="max-height: 100%">
    <div
      class="text-xl border-l-2 h-fit pl-2 font-bold relative flex"
      :style="titleStyleCompound"
      :class="titleClass"
    >
      <slot name="title">
        {{ title || "TITLE" }}
      </slot>
      <div
        class="absolute right-0 text-sm opacity-60 pr-2"
        :class="subTitleClass"
      >
        <slot name="subTitle">
          {{ subTitle || "SUBTITLE" }}
        </slot>
      </div>
    </div>

    <div
      class="pl-3 text-base"
      style="height: 100%"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps([
  "title",
  "borderColor",
  "titleStyle",
  "titleClass",
  "subTitle",
  "subTitleClass",
]);

const titleStyleCompound = computed(() => {
  return Object.assign(
    {
      "border-left": "4px",
      "border-style": "solid",
      "border-color": props.borderColor || "#498bf7",
    },
    props.titleStyle
  );
});
</script>

<style lang="scss" scoped></style>
